<template>
  <ElInput
    class="el-input__limit-clearable"
    v-model.trim="data.value"
    :maxlength="data.text.maxLength"
    :placeholder="placeholder"
    @input="filter"
    @focus="filter"
    @blur="format"
    show-word-limit
    clearable
  />
</template>

<script lang="ts">
import { computed, defineComponent, toRef } from 'vue'
import { Widget } from '@/models'
import { getTextPlaceholder } from '../input/utils'
import useNumberInput from './useNumberInput'

/** 数字填写 */
export default defineComponent({
  name: 'FaNumberFill',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    const data = toRef(props, 'data')

    const formatter = useNumberInput(data)

    return {
      ...formatter,

      /** 占位 */
      placeholder: computed(() => getTextPlaceholder(props.data))
    }
  }
})
</script>
